import list  from './todolist.js'

const  tbody =  document.getElementById("tbody");
export function show(){
    tbody.innerHTML ="";
    list.forEach((todo, index ) => {
        const tr = `
        <tr>
        <td>${ index+1 }</td>
        <td>${todo.title}</td>
        <td>${todo.status}</td>
        <td> 
        <button  class="statusBtn"  type="button">
        ${
            todo.status === "未开始"? "开始" :
            todo.status === "进行中"? "完成" :
            todo.status === "已完成"? "删除" :
            todo.status === "已删除"? "恢复" :
            ""
        }
        </button>    
    </td>
    </tr>
        `
        tbody.innerHTML +=tr
    });

    const  statusBtns =  document.getElementsByClassName("statusBtn");
    // statusBtns.forEach(btn => {
    //     btn.onclick= event=>{
    //         console.log(event);
    //     }
        
    // });
    for (let index = 0; index < statusBtns.length; index++) {
        const element = statusBtns[index];
        element.onclick= event=>{
            const todo =   ( list[index]  );
            const s =  (event.target.innerHTML.trim() );
            todo.status = ( s==="开始" ?  "进行中" :   
                           s==="完成" ? "已完成" :
                           s==="删除" ? "已删除" :"XXX");
            show();
        }        
        
    }


}